<template>
  <div>
    <div class="product-list">
      <div v-for="(item, index) in list" :key="index">
        <article-item :info="item"></article-item>
      </div>
      <div class="load-more" v-if="!isEnd && !isEmpty">
        <van-button
          :loading="isLoading"
          loading-text="加载中..."
          type="default"
          @click="loadMore"
          >加载更多...</van-button
        >
      </div>
      <div class="no-data" v-if="isEnd && !isEmpty">
        <van-button plain type="default">没有更多了...</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
import articleItem from "./components/article-item";
import { getList } from "@/api/article";
import { searchToObj } from "@/utils/func";
import { pagination } from "@/utils/enumConfig";
export default {
  components: {
    articleItem,
  },
  data() {
    return {
      pagination: this.$_.cloneDeep(pagination),
      list: [],
      bannerList: [],
      isEnd: false,
      isEmpty: false,
      isLoading: false,
    };
  },
  created() {},
  async mounted() {
    await this.getList(this.pagination);
  },
  methods: {
    async loadMore() {
      let { current } = this.pagination;
      await this.getList({
        ...this.pagination,
        current: current + 1,
      });
    },
    async getList(pagination) {
      this.isLoading = true;
      let { size } = pagination;
      let list = await getList({
        ...pagination,
      });
      if (list) {
        this.list = this.list.concat(list);
        this.pagination = pagination;
        this.isEnd = list.length < size ? true : false;
        this.isEmpty = list.length === 0 ? true : false;
      }
      this.isLoading = false;
    },
    async getBannerList() {
      let list = await getBanner();
      this.bannerList = list;
    },
  },
};
</script>

<style lang="scss" scoped>
.product-list {
  padding-bottom: 20%;
  .load-more,
  .no-data {
    width: 100%;
    button {
      width: 100%;
      color: #666;
    }
  }
}
</style>
